Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: allow activeProps to infer component props #2347

Merged
merged 15 commits into from
Sep 24, 2024
Merged

Conversation

chorobin
Copy link
Contributor

@chorobin chorobin commented Sep 15, 2024

Fixes #2079

Copy link

nx-cloud bot commented Sep 15, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit bace58c. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 2 targets

Sent with 💌 from NxCloud.

Copy link

pkg-pr-new bot commented Sep 15, 2024

Open in Stackblitz

More templates

@tanstack/create-router

pnpm add https://pkg.pr.new/@tanstack/create-router@2347

@tanstack/eslint-plugin-router

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-router@2347

@tanstack/history

pnpm add https://pkg.pr.new/@tanstack/history@2347

@tanstack/react-cross-context

pnpm add https://pkg.pr.new/@tanstack/react-cross-context@2347

@tanstack/react-router

pnpm add https://pkg.pr.new/@tanstack/react-router@2347

@tanstack/react-router-with-query

pnpm add https://pkg.pr.new/@tanstack/react-router-with-query@2347

@tanstack/router-arktype-adapter

pnpm add https://pkg.pr.new/@tanstack/router-arktype-adapter@2347

@tanstack/router-cli

pnpm add https://pkg.pr.new/@tanstack/router-cli@2347

@tanstack/router-devtools

pnpm add https://pkg.pr.new/@tanstack/router-devtools@2347

@tanstack/router-generator

pnpm add https://pkg.pr.new/@tanstack/router-generator@2347

@tanstack/router-valibot-adapter

pnpm add https://pkg.pr.new/@tanstack/router-valibot-adapter@2347

@tanstack/router-plugin

pnpm add https://pkg.pr.new/@tanstack/router-plugin@2347

@tanstack/router-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/router-vite-plugin@2347

@tanstack/router-zod-adapter

pnpm add https://pkg.pr.new/@tanstack/router-zod-adapter@2347

@tanstack/start

pnpm add https://pkg.pr.new/@tanstack/start@2347

@tanstack/start-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/start-vite-plugin@2347

@tanstack/virtual-file-routes

pnpm add https://pkg.pr.new/@tanstack/virtual-file-routes@2347

commit: bace58c

export type UseLinkPropsOptions<
TRouter extends AnyRouter = RegisteredRouter,
TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
TTo extends string | undefined = '.',
TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
TMaskTo extends string = '.',
> = ActiveLinkOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
React.AnchorHTMLAttributes<HTMLAnchorElement>
> = ActiveLinkOptions<'a', TRouter, TFrom, TTo, TMaskFrom, TMaskTo> &
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

about the 'a': please see this comment #2092 (comment)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works with 'a' properly now ;)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cool!
@mirague check this out

@chorobin chorobin marked this pull request as ready for review September 22, 2024 22:20
props: Parameters<typeof Button>[0],
ref: React.Ref<HTMLButtonElement>,
) => {
return <Button {...props} ref={ref} component={Link} />
Copy link
Contributor

@schiller-manuel schiller-manuel Sep 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

and how does this button then get access to the to?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it need to? Its there at runtime but its not been typed. I'm not sure the use case for this though

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what if you want to navigate to to upon button click?

Copy link

@mirague mirague Sep 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a similar usecase for getting access to the active: boolean property to render a different variant of the component based on the Link being active.

(activeProps doesn't seem to propagate as expected)

@schiller-manuel schiller-manuel merged commit f76bb37 into main Sep 24, 2024
5 checks passed
@schiller-manuel schiller-manuel deleted the create-link-types branch September 24, 2024 18:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

When using createLink(), activeProps type should allow component props
3 participants